<template>
  <div class="text-sm pb-3 px-2 pt-1">
    <div
      v-for="time in Math.ceil($datas.stations.length / 14)"
      :key="time"
      class="box flex flex-row justify-evenly"
    >
      <div
        class="flex flex-col cursor-pointer"
        v-for="(item, index) in $datas.stations.slice(
          14 * (time - 1),
          14 * (time - 1) + 14
        )"
        :key="index"
        @click="flyToAStation(14 * (time - 1) + index)"
      >
        <span class="bus w-5 h-5 text-center ml-0.5">
          <!-- @click.stop阻止事件传播 -->
          <Icon
            class="text-sky-500"
            icon="bxs:bus"
            width="20"
            v-if="$getActiveIndex() === 14 * (time - 1) + index"
            @click.stop="changeView('follow')"
          />
        </span>
        <span
          class="text-center"
          :class="{
            'text-amber-500': $getActiveIndex() === 14 * (time - 1) + index,
          }"
          >{{ 14 * (time - 1) + index + 1 }}</span
        >
        <span class="relative station_text">
          <span
            class="vertical-text h-24 single-line-ellipsis"
            :class="{
              'text-amber-500': $getActiveIndex() === 14 * (time - 1) + index,
            }"
            >{{ item.name }}
          </span>
          <SmallTip>
            {{ item.name }}
          </SmallTip>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import { inject, onMounted } from "vue";
import * as Cesium from "cesium";
import SmallTip from "/src/components/SmallTip";
import $bus from "/src/bus";
const $datas = inject("$datas");
const $getActiveIndex = inject("$getActiveIndex");
const $changeActiveIndex = inject("$changeActiveIndex");
let $viewer = null,
  $busEntity = null,
  checkedEntity = null
// console.log($datas.stations, Math.ceil($datas.stations.length / 14));
// 定义一个自定义事件
//第一个参数:即为事件类型  第二个参数:即为事件回调
$bus.on("$getBusEntity", (busEntity) => {
  $busEntity = busEntity;
});
onMounted(() => {
  $viewer = inject("$viewer");
  // console.log($viewer)
});
// 点击飞到某一个站点
function flyToAStation(id) {
  if (checkedEntity) {
    checkedEntity.label.fillColor = Cesium.Color.WHITE
  }
  // console.log(id)
  id = "station" + id;
  checkedEntity = $viewer.entities.getById(id);
  checkedEntity.label.fillColor = Cesium.Color.YELLOW
  $viewer.flyTo(checkedEntity, {
    duration: 3,
    maximumHeight: 3000,
    offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-30), 100),
    // heading表示相机的水平方向旋转，
    // pitch表示相机的垂直方向旋转，
    // range表示相机到目标的距离
  });
}
// 改变视角
function changeView() {
  // console.log($busEntity);
  if ($busEntity) {
    $viewer.trackedEntity = $busEntity
  }
}
</script>

<style lang="scss">
// 竖向显示文字
.vertical-text {
  writing-mode: vertical-lr; /* 从左到右垂直显示 */
  text-orientation: mixed; /* 允许混合横竖排列 */
}
// 强制一行显示，多余部分显示省略号
.single-line-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出部分的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
<style lang="scss" scoped>
.station_text {
  &:hover {
    .tip {
      display: block;
    }
  }
}
</style>
